<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <title></title>
  </head>
  <body>
    
	<div id="app">{{message}}</div>
	 <hr>
	<div id="app2">
	<span v-bind:title="message">
		鼠标悬停几秒钟查看此处动态绑定的提示信息！
	</span>
	</div>
	
	 <hr>
	 <div id="app3">
	  <p v-if="seen">
		现在你看到我了
	  </p>
	 </div>
	 <hr> 
	 <div id="app4">
	  <ol>
	    <li v-for="todo in todos">
			{{todo.text}}
		</li>
	  <ol>
	 </div>
	 <hr>
	 <div id="app5">
		<p>{{message}}</p>
		<button v-on:click="reverseMessage">逆转消息</button>
	 </div>
	 
	  <hr>
	  <div id="app6">
		<p>{{message}} <p>
		 <input type="text" v-model="message" />
	  </div>
	  
	   <hr>
	   <div id="app7">
		<ol>
		 <todo-item v-for="item in items" v-bind:todo="item"></todo-item>
		</ol>
	   </div>
<script type="text/javascript">
	var app = new Vue({
			el:"#app",
			data:{
					message:"hello world!"
			}
	});
	var app2 = new Vue({
		el:"#app2",
		data:{
			message:'page load '+ new Date()
		}
	})
	var app3 = new Vue({
		el:"#app3",
		data:{
			seen:true
		}
	})
	var app4 = new Vue({
		el:"#app4",
		data:{
			todos:[{
			text:'text1'
			},
			{
			 text:'text2'	
			}
			]
		}
	})
	var app5 = new Vue({
		el:"#app5",
		data:{
			message:"hello world!"
		},
		methods:{
			reverseMessage:function(){
				this.message = this.message.split('').reverse().join('')
			}
		}
	})
	var app6 = new Vue({
		el:"#app6",
		data:{
			message:"hello world!"
		}
	})
	Vue.component('todo-item',{
		props:['todo'],
		template:'<li>{{todo.text}}</li>'
	})
	var app7 = new Vue({
		el:"#app7",
		data:{
			items:[{
			text:"apple"
			},{
			text:"banana"
			}
			]
		}
	})
</script>
  </body>
</html>
